<template>
  <div>
    <el-button type="primary"  @click.stop="onAddItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
    <el-collapse v-model="activeNames" class="right-event-rotate3d">
      <el-collapse-item v-for="(item, index) in lists" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          第{{DIGIT_MAP[index]}}个图片<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteItem(index)"></i>
        </template>
        <add-img-con :url="item.url" picAttr="url" :index="index" :height="100" :isCrop='true' class="margin-left-right-16"></add-img-con>
        <input-normal label="图片地址" v-model="item.url" @change="onUpdateItem(index)"></input-normal>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
  import AddImgCon from '@/views/components/add-img-con.vue'
  import InputNormal from '@/views/components/edit/InputNormal.vue'

  import { editUtils } from '@/views/js/edit-utils'

  export default {
    mixins: [editUtils],
    components: {
      AddImgCon,
      InputNormal
    },
  }
</script>